@import "../../../assets/css/tailwind.css";
html,
body {
  @apply w-screen h-screen;
}

body {
  background: url("/assets/login/images/login-bg.png");
  @apply bg-cover;
}

.div-icon {
  @apply absolute;
}

.div-icon img {
  @apply mx-2;
}

.div-icon p {
  @apply flex text-nowrap items-center;
  @apply size-6 sm:size-6 md:size-8 lg:size-10 xl:size-12 2xl:size-14;
}
.div-locale {
  z-index: 1;
  width: 130px;
  @apply absolute right-2 bg-transparent;
}
:root {
  --sl-input-background-color: transparent;
  --sl-input-border-color: transparent;
  --sl-input-border-color-focus: transparent;
  --sl-input-focus-ring-color: transparent;
}
.div-container {
  @apply grid place-items-center h-screen;

  .svg-grid {
    @apply fixed inset-0 w-full inset-0;
    color: color-mix(in oklab, oklch(0.208 0.042 265.755) 12%, transparent);
    -webkit-mask-image: linear-gradient(to bottom left, #fff, #0000, #0000);
    mask-image: linear-gradient(to bottom left, #060606, #00000000, #0000);
  }
}

.box-center {
  height: 70%;
  @apply md:box-content relative text-gray-800;
}
.div-register-box {
  overflow-y: auto;
  height: 80%;
  @apply min-w-96 relative text-gray-800 grid grid-cols-2;
}

.div-register-title {
  @apply mb-6;
  @apply text-center font-sans font-semibold;
  @apply text-xs sm:text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl;
}

.div-register-div {
  @apply flex mt-2 mb-2 mr-10;
}

.div-register-text {
  @apply grow-0 basis-1/6 content-center  break-keep text-xs sm:text-xs md:text-xs lg:text-xs xl:text-sm 2xl:text-sm;
}

.div-register-input {
  @apply grow ml-4;
}

.div-register-input sl-input {
  background-color: rgba(255,255,255,0.8);
  @apply appearance-none text-slate-900 rounded-md block w-full;
  @apply sm:text-sm  placeholder:text-slate-400 focus:ring-2 ring-1 ring-slate-200;
}
.div-register-input input {
  background-color: rgba(255,255,255,0.8);
  @apply appearance-none text-slate-900 rounded-md block w-full;
  @apply sm:text-sm  placeholder:text-slate-400 focus:ring-2 ring-1 ring-slate-200;
}

.div-register-input sl-select {
  background-color: rgba(255,255,255,0.8);
  @apply appearance-none text-slate-900 rounded-md block w-full;
  @apply sm:text-sm  placeholder:text-slate-400 focus:ring-2 ring-1 ring-slate-200;
}
.div-register-input select {
  background-color: rgba(255,255,255,0.8);
  @apply appearance-none text-slate-900 rounded-md block w-full;
  @apply sm:text-sm  placeholder:text-slate-400 focus:ring-2 ring-1 ring-slate-200;
}

.div-register-div.div-phone .div-register-input {
  @apply flex flex-nowrap items-center p-0; /* 关键布局 */
}

.div-register-div.div-address {
  @apply col-span-2;
  & .div-register-text {
    @apply basis-1/12;
  }
  & .div-register-input {
    @apply -ml-4;
  }
}
.div-register-div.div-phone sl-select {
  @apply ml-4;
}
.div-register-div.div-phone sl-select {
  @apply w-24 !important; /* 固定宽度 */
  flex-shrink: 0; /* 禁止收缩 */
}

.button-register {
  @apply inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-indigo-500 text-white hover:bg-indigo-700 w-full;
}

.div-register-footer {
  @apply text-center mt-8 text-gray-600;
  p {
    @apply flex justify-around;
    &:hover {
      @apply text-gray-800;
    }
  }
}

.div-footer {
  @apply absolute bottom-2 text-center w-screen text-gray-400;
}


wcs-loading-bounce {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
